<template>
  <header class="header-component">
    <dx-toolbar class="header-toolbar">
      <dx-item
        :visible="menuToggleEnabled"
        location="before"
        css-class="menu-button"
      >
        <template #default>
          <dx-button icon="menu" styling-mode="text" @click="toggleMenuFunc" />
        </template>
      </dx-item>

      <dx-item
        v-if="title"
        location="before"
        css-class="header-title dx-toolbar-label"
      >
        <div>{{ title }}</div>
      </dx-item>

      <dx-item
        location="after"
        locate-in-menu="auto"
        menu-item-template="menuUserItem"
      >
        <template #default>
          <div>
            <dx-button
              class="user-button authorization"
              :width="210"
              height="100%"
              styling-mode="text"
            >
              <user-panel
                :email="email"
                :menu-items="userMenuItems"
                menu-mode="context"
              />
            </dx-button>
          </div>
        </template>
      </dx-item>

      <template #menuUserItem>
        <user-panel
          :email="email"
          :menu-items="userMenuItems"
          menu-mode="list"
        />
      </template>
    </dx-toolbar>
  </header>
</template>

<script lang="ts">
import DxToolbar, { DxItem } from "devextreme-vue/toolbar";
import DxButton from "devextreme-vue/button";

import UserPanel from "./user-panel.vue";
import { Options, Vue } from "vue-class-component";
import { Inject, Prop } from "vue-property-decorator";
import { ApiTool } from "../api/api-tool";
import { ApiExceptionShow } from "../utils/api-exception-show";
import { LoginClient } from "../api/api_loginclient";
import notify from "devextreme/ui/notify";
import jwtDecode from "jwt-decode";
import { get } from "js-cookie";

@Options({
  components: {
    DxButton,
    DxToolbar,
    DxItem,
    UserPanel,
  },
})
export default class HeaderToolbar extends Vue {
  @Prop()
  menuToggleEnabled: boolean;

  @Prop()
  title: string;

  @Prop()
  toggleMenuFunc: Function;

  @Prop()
  logOutFunc: Function;

  @Inject()
  apiTool: ApiTool;

  email = "管理员";

  userMenuItems = [];

  mounted() {
    this.userMenuItems = [
      // {
      //   text: "个人资料",
      //   icon: "user",
      //   onClick: () => {},
      // },
      {
        text: "退出登录",
        icon: "runner",
        onClick: () => {
          let client = this.apiTool.createClient(LoginClient);
          client.loginOut();
          notify("退出成功!", "success", 500);
          setTimeout(() => {
            this.$router.push("/login");
          }, 500);
        },
      },
    ];
    // this.loadTokenInfo()
  }
  loadTokenInfo() {
    let token = get("AccessToken.ClinicApi");
    let jwtInfo = jwtDecode<{ [key: string]: string }>(token);
    this.email =
      jwtInfo["nick_name"] || jwtInfo["real_name"] || jwtInfo["account"];
  }
  onProfileClick() {
    this.$router.push({
      path: "/profile",
      query: { redirect: this.$route.path },
    });
  }
}
</script>

<style lang="scss">
@import "../themes/generated/variables.base.scss";
@import "../dx-styles.scss";

.header-component {
  flex: 0 0 auto;
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  .dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
    color: $base-accent;
  }
}

.dx-toolbar.header-toolbar .dx-toolbar-items-container .dx-toolbar-after {
  padding: 0 40px;
  .screen-x-small & {
    padding: 0 20px;
  }
}

.dx-toolbar .dx-toolbar-item.dx-toolbar-button.menu-button {
  width: $side-panel-min-width;
  text-align: center;
  padding: 0;
}

.header-title .dx-item-content {
  padding: 10px;
  margin: 0;
}

.dx-theme-generic {
  .dx-toolbar {
    padding: 10px 0;
  }

  .user-button > .dx-button-content {
    padding: 3px;
  }
}
</style>
